import React, { Component } from 'react';

import {Flex, List, InputItem, Button, Toast,WingBlank } from 'antd-mobile';
import { post } from '../api/getData';

import 'antd-mobile/lib/flex/style/css';
import 'antd-mobile/lib/list/style/css';
import 'antd-mobile/lib/button/style/css';
import 'antd-mobile/lib/toast/style/css';
import 'antd-mobile/lib/wing-blank/style/css';

import 'antd-mobile/lib/input-item/style/css';

import '../allStyle.css';

const FlexItem = Flex.Item;

class Login extends Component{
    state = {
        dlgTipTxt: '获取验证码',
        seconds: 59,
        mobile:'',
        wechat:'',
        code:'',
        loading:false
    };
    sendMsg = () => {
        if(this.state.seconds < 59){
            return;
        }
        if(this.state.mobile == ''){
            Toast.fail('手机号不能为空');
            return;
        }
        let reqParams = {
            mobile:this.state.mobile
        };

        let _this = this;
        post('/api/send/check/code', reqParams, function (error, data) {
            if(null === error){
                let siv = setInterval(() => {
                    _this.setState({
                        seconds: _this.state.seconds-1,
                        dlgTipTxt: `(${_this.state.seconds}s后重新获取)`,
                    }, () => {
                        if (_this.state.seconds == 0) {
                            clearInterval(siv);
                            _this.setState({
                                seconds: 59,
                                dlgTipTxt : '重新获取'
                            });
                        }
                    });
                }, 1000)
            }
        });
    }
    handelSubmit(){
        this.setState({
            loading:true
        });
        if(this.state.mobile == ''){
            Toast.fail('手机号不能为空');
        }
        if(this.state.wechat == ''){
            Toast.fail('微信号不能为空');
        }
        if(this.state.code == ''){
            Toast.fail('验证码不能为空');
        }

        let reqParams = {
            mobile:this.state.mobile,
            wechat:this.state.wechat,
            code:this.state.code
        };
        post('/api/agent/apply', reqParams, function (error, data) {
            if(null === error){
                Toast.success('申请成功');
                localStorage.removeItem('examine');
                window.location.href = "/Examine";
            }else{
                Toast.fail(error);
            }
        });
    }

    componentDidMount(){
        document.title = '申请成为代理';
    }
    render(){
        return(
            <div >
                <List>
                    <InputItem
                            type="phone"
                            placeholder="请输入手机号码"
                            onChange={(mobile)=>{this.setState({mobile:mobile})}}
                            >手机号码</InputItem>
                </List>
                <List>
                        <InputItem
                            type="text"
                            placeholder="请输入微信号码"
                            onChange={(wechat)=>{this.setState({wechat:wechat})}}
                        >微信号码</InputItem>
                </List>
                <List>
                        <InputItem
                            type="text"
                            placeholder="请输入验证码"
                            extra={
                                <div style={{color:'#8bf30f'}}>{this.state.dlgTipTxt}</div>
                            }
                            onExtraClick={this.sendMsg.bind(this)}
                            onChange={(code)=>{this.setState({code:code})}}
                        >验证码</InputItem>
                </List>
                <WingBlank>
                    <Button loading={this.state.loading} onClick={this.handelSubmit.bind(this)} style={{marginTop:'0.8rem'}} type="primary">申请成为代理</Button>
                </WingBlank>
            </div>
        )
    }
}
export default Login;
